<template>
  <div class="main-page account" id="store-page" title-class="item_name">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="收益明细" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <!-- <nav-bar :title="'返利明细'"/> -->
    <!-- 主体内容 -->
    <div class="main-content has-header-space">
      <div class="rebate_index">
        <van-tabs v-model="active" sticky>
            <van-tab title="全部">
                <div class="select_option">
                    <div class="date_select" @click="controlTimePanl('all_gains')"><span>{{all_gains.curr_date}}</span></div>
                    <div class="date_total">到账返利  <span>¥{{all_gains.amount}}</span></div>
                </div>
                <div class="rebate_lit">
                  <van-list v-model="all_gains.loading" :finished="all_gains.finished" error-text="请求失败，点击重新加载" @load="onLoad('all_gains')">
                    <Item v-for="(item, k) in all_gains.list" v-bind:key="k" :item="item"></Item>
                  </van-list>
                  <NotData v-if="!all_gains.loading && !all_gains.list.length"></NotData>
                </div>
            </van-tab>
            <van-tab title="已返利">
              <div class="select_option">
                    <div class="date_select" @click="controlTimePanl('gains_ok')"><span>{{gains_ok.curr_date}}</span></div>
                    <div class="date_total">到账返利  <span>¥{{gains_ok.amount}}</span></div>
                </div>
                <div class="rebate_lit">
                  <van-list v-model="gains_ok.loading" :finished="gains_ok.finished" error-text="请求失败，点击重新加载" @load="onLoad('gains_ok')">
                    <Item v-for="(item, k) in gains_ok.list" v-bind:key="k" :item="item"></Item>
                  </van-list>
                  <NotData v-if="!gains_ok.loading && !gains_ok.list.length"></NotData>
                </div>
            </van-tab>
            <van-tab title="待返利">
              <div class="select_option">
                    <div class="date_select" @click="controlTimePanl('to_be_gains')"><span>{{to_be_gains.curr_date}}</span></div>
                    <!-- <div class="date_total">到账返利  span¥992.21</div> -->
                </div>
                <div class="rebate_lit">
                  <van-list v-model="to_be_gains.loading" :finished="to_be_gains.finished" error-text="请求失败，点击重新加载" @load="onLoad('to_be_gains')">
                    <Item v-for="(item, k) in to_be_gains.list" v-bind:key="k" :item="item"></Item>
                  </van-list>
                  <NotData v-if="!to_be_gains.loading && !to_be_gains.list.length"></NotData>
                </div>
            </van-tab>
            <van-tab title="退货">
              <div class="select_option">
                    <div class="date_select" @click="controlTimePanl('gains_fail')"><span>{{gains_fail.curr_date}}</span></div>
                    <!-- <div class="date_total">到账返利  span¥992.21</div> -->
                </div>
                <div class="rebate_lit">
                  <van-list v-model="gains_fail.loading" :finished="gains_fail.finished" error-text="请求失败，点击重新加载" @load="onLoad('gains_fail')">
                    <Item v-for="(item, k) in gains_fail.list" v-bind:key="k" :item="item"></Item>
                  </van-list>
                  <NotData v-if="!gains_fail.loading && !gains_fail.list.length"></NotData>
                </div>
            </van-tab>
        </van-tabs>
      </div>
    </div>
     <van-popup v-model="show_time" position="bottom" :overlay="true">
     <van-datetime-picker
       v-model="currentDate"
       type="year-month"
       :min-date="minDate"
       :max-date="maxDate"
       :formatter="formatter"
       @confirm="selectTime"
       @cancel="controlTimePanl"
      />
   </van-popup>
  </div>
</template>

<script>
// import NavBar from '@/components/global/nav-bar.vue'
import Item from '@/components/merber/account_details/rebate_item.vue'
import Tool from '@/utils/tool.js'
import NotData from '@/components/global/not-data.vue'

export default {
  components: { Item, NotData },
  data () {
    return {
      active: 0,
      show_time: false,
      minDate: new Date(2019, 4, 31),
      currentDate: new Date(),
      maxDate: new Date(),
      curr_date: Tool.formatDate(new Date()),
      loading: false,
      is_self: 0,
      all_gains: {
        total: 0,
        loading: true,
        curr_page: 0,
        finished: false,
        list: [],
        curr_date: Tool.formatDate(new Date()),
        amount: 0
      },
      gains_ok: {
        total: 0,
        loading: true,
        curr_page: 0,
        finished: false,
        list: [],
        curr_date: Tool.formatDate(new Date()),
        amount: 0
      },
      to_be_gains: {
        total: 0,
        curr_page: 0,
        loading: true,
        finished: false,
        list: [],
        curr_date: Tool.formatDate(new Date()),
        amount: 0
      },
      gains_fail: {
        total: 0,
        curr_page: 0,
        loading: true,
        finished: false,
        list: [],
        curr_date: Tool.formatDate(new Date()),
        amount: 0
      }
    }
  },
  created () {
    console.log(this.$route.query.type)
    let type = this.$route.query.type
    if (type === 'share') {
      this.pageTitle = '分享商品返利'
    } if (type === 'self') {
      this.is_self = 1
      this.pageTitle = '自购商品返利'
    }
    document.title = this.pageTitle
    this.getList('all_gains')
    this.getList('gains_ok')
    this.getList('to_be_gains')
    this.getList('gains_fail')
  },
  methods: {
    controlTimePanl () {
      this.show_time = !this.show_time
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    selectTime (e) {
      this.controlTimePanl()
      let type = 'all_gains'
      if (this.active === 0) {
        type = 'all_gains'
      } else if (this.active === 1) {
        type = 'gains_ok'
      } else if (this.active === 2) {
        type = 'to_be_gains'
      } else if (this.active === 3) {
        type = 'gains_fail'
      }
      this[type].curr_date = Tool.formatDate(e)
      this[type].list = []
      this[type].curr_page = 0
      this[type].loading = true
      this.getList(type)
    },
    /**
     * 获取列表信息
     */
    getList (type) {
      var data = {
        type: type,
        page: this[type].curr_page,
        time: this[type].curr_date
      }
      if (this.is_self) {
        data.is_self = this.is_self
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_gains', params: data, method: 'get' }).then((resp) => {
          if (resp.return_code === '0000') {
            this[type].list = this[type].list.concat(resp.data.list)
            this[type].total = resp.data.total
            this[type].amount = resp.data.amount
            if (this[type].list.length < resp.data.total) {
              this[type].finished = false
            } else {
              this[type].finished = true
            }
          }
          this[type].loading = false
          resolve(resp)
        }).catch((error) => {
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    onLoad (type) {
      this[type].curr_page = this[type].curr_page + 1
      this.getList(type)
    }
  }
}
</script>

<style>
</style>
